<template>
  <div class="musicList">
    <div class="musicList-top">
      <div class="title">发现好歌单</div>
      <div class="more">查看更多</div>
    </div>
    <div class="mlist">
      <div class="swiper-container mySwiper" id="musicSwiper">
        <div class="swiper-wrapper">
          <!-- router-link 点击跳转 -->
          <router-link :to="{path:'/listview',query:{id:item.id}}" class="swiper-slide" v-for="(item, i) in state.musicList" :key="i">
            <img :src="item.picUrl" :alt="item.name" />
            <div class="name">{{ item.name }}</div>
            <div class="count">
              <svg class="icon search" aria-hidden="true">
                <use xlink:href="#icon-24gl-play"></use>
              </svg>
              <span>{{ changeValue(item.playCount) }}</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "swiper";
import { getMusicList } from "@/api/index.js";
import "swiper/css/swiper.css";
// import musicList from '@/components/musicList.vue';
import {reactive,onMounted,onUpdated} from 'vue'
import store from '@/store/index.js'
export default{
  setup(){
    // 变成响应式
    let state = reactive({musicList:[]})
    function changeValue(num){
      let res = 0;
      if (num >= 100000000) {
        res = num / 100000000;
        // 小数点后两位
        res = res.toFixed(2) + "亿";
      } else if (num > 10000) {
        res = num / 10000;
        res = res.toFixed(2) + "万";
      }
      // console.log(num);
      return res;
    }
    onMounted(async ()=>{
      let result = await getMusicList();
      state.musicList = result.data.result;
      // console.log(result);
    })
    onUpdated(()=>{
      var swiper = new Swiper("#musicSwiper", {
      slidesPerView: 3,
      spaceBetween: 10,
    });
    })
    return {
      state,
      changeValue
    }
  }
}

/*
vue2 写法
export default {
  data() {
    return {
      musicList: [],
    };
  },
  methods: {
    changeValue: function(num) {
      let res = 0;
      if (num >= 100000000) {
        res = num / 100000000;
        // 小数点后两位
        res = res.toFixed(2) + "亿";
      } else if (num > 10000) {
        res = num / 10000;
        res = res.toFixed(2) + "万";
      }
      console.log(num);
      return res;
    },
  },
  mounted: async function() {
    let result = await getMusicList();
    this.musicList = result.data.result;
    // console.log(result);
    console.log(result.data.result[2].playCount);
  },
  updated() {
    var swiper = new Swiper("#musicSwiper", {
      slidesPerView: 3,
      spaceBetween: 10,
    });
  },
};
*/
</script>

<style lang="less" scoped>
.musicList {
  width: 7.5rem;
  padding: 0 0.4rem;
  .musicList-top {
    display: flex;
    justify-content: space-between;
    height: 1rem;
    align-items: center;
    .title {
      font-size: 0.4rem;
      font-weight: 900;
    }
    .more {
      border: 1px solid #ccc;
      padding: 0.06rem;
      border-radius: 0.2rem;
      font-size: 0.24rem;
      width: 1.2rem;
      height: 0.5rem;
      text-align: center;
      // line-height: 0.5rem;
    }
  }
  .mlist {
    .swiper-container {
      width: 100%;
      height: 3rem;
      .swiper-slide {
        // background-color: orange;
        display: flex;
        flex-direction: column;
        position: relative;
        img {
          width: 100%;
          height: auto;
          border-radius: 0.1rem;
        }
        .name {
          height: 0.6rem;
          width: 100%;
          font-size: 00.24rem;
          line-height: 00.4rem;
        }
        .count {
          position: absolute;
          right: 0.1rem;
          top: 0.1rem;
          font-size: 0.24rem;
          color: #ccc;
          display: flex;
          // 侧轴居中
          align-items: center;
          .icon {
            fill: #ccc;
          }
        }
      }
    }
  }
}
</style>
